<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style>
body {margin:0;padding:0;-webkit-user-select:none;font:12px/1.5 Arial, Helvetica, sans-serif;background:#F5F6F7;}
header,section {padding:10px 15px;margin:0 auto;width:770px;border:solid 1px #a9c2e0;border-radius:5px;-webkit-box-shadow: 2px 3px 2px #DDD;background:#fff;}
header {margin:20px auto 15px;background:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.1, #fff), color-stop(0.7, #e7f1fb));}
header div {font:menu;font-size:30px;line-height:56px;text-shadow:#FBF8FC 1px 1px 1px;}
header img {float:right;}
section {width:720px;}
.main {height:300px;padding:60px 40px 0;border-bottom:none;border-radius:5px 5px 0 0;}
.left {float:left;padding-bottom:20px;border-right:1px solid #a9c2e0;}
.left div {width:340px;padding:5px 20px;margin:5px auto 0;}
.left span,.left label {width:120px;margin-right:8px;display:inline-block;text-align:right;}
.right {float:right;padding:20px 0 0 10px;width:260px;display:none}
.right p,.right input.in {margin:0;width:202px;}
.right input.in {line-height:20px;padding:3px 6px;border-radius:3px;border:1px solid #A9C2E0;}
.right input[type=button] {height:26px;margin:0 5px 0 -1px;}
.right .error{margin:1px 0;color:red;height:20px;}
.right .wel{font-size:18px;}
.right b{font-size:20px;overflow:hidden;text-overflow:ellipsis;}
.save {height:20px;padding:20px 40px;border-radius:0 0 5px 5px;}
.save .btns {float:right;}
#login, #reg {width:60px;height:26px;margin:-5px 3px;}
#version {float:left;padding:1px 8px;background:#a9c2e0;border-radius:8px;}
#saveBtn, #closeBtn{width:100px;height:30px;margin:-5px 10px;}
#saveMessage {background:yellow;font-size:14px;padding:4px 8px;opacity:0;border-radius:5px;-webkit-transition: all .6s linear;}
</style>
</head>
<body>
<header>
	<div i18n="optionsTitle"></div>
</header>
<section class="main">
	<div class="left">
		<div>
			<p><label i18n="hotkeyEnableText" for="hotkeyEnable"></label><input id="hotkeyEnable" type="checkbox" /></p>
			<p><span i18n="imageHotkeyText"></span><input id="imageHotkeyValue" type="text"/></p>
			<p><span i18n="textHotkeyText"></span><input id="textHotkeyValue" type="text"/></p>
		</div>
		<div>
			<label i18n="enableAnalysisHelper" for="enableAnalysisHelper"></label><input id="enableAnalysisHelper" type="checkbox" />
			<label i18n="enableSuperAutoNextPage" for="enableSuperAutoNextPage"></label><input id="enableSuperAutoNextPage" type="checkbox" />
		</div>
		<div>
			<label i18n="enableLinkTab" for="enableLinkTab"></label><input id="enableLinkTab" type="checkbox" />
			<label i18n="enableShareBtn" for="enableShareBtn"></label><input id="enableShareBtn" type="checkbox" />
        </div>
		<div>
            <label i18n="enableRightMenu" for="enableRightMenu"></label><input id="enableRightMenu" type="checkbox" />
        </div>
	</div>
	<div id="userInfoPanel" class="right">
		<p id="notify" i18n="optionsLoginNotify"></p>
		<p>&nbsp;</p>
		<div id="loginPanel">
			<p i18n="emailLabel">Email:</p>
			<p><input id="email" class="in"/></p>
			<p id="emailErr" class="error"></p>
			<p i18n="passwordLabel">Password:</p>
			<p><input id="password" class="in" type="password"/></p>
			<p id="passErr" class="error"></p>
			<p><button id="login" type="button" i18n="login"></button> <button id="reg" type="button" i18n="register"></button></p>
		</div>
	</div>
</section>
<section class="save">
	<div id="version"></div>
	<div style="margin:1px 0 0 7px;float:left;"><a href="http://os.heimali.com/HappyReader/log.html" target="_blank" i18n="updateLog"></a></div>
	<div class="btns">
        <span id="saveMessage"></span>
		<button id="saveBtn" i18n="optionsSaveBtn"></button>
        <button id="closeBtn" i18n="optionsCloseBtn" onclick="window.close();"></button>
	</div>
</section>
<script src="js/qui.js"></script>
<script src="js/options.js"></script>
</body>	
</html>